<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--面板-->
    <div id="panel">
        <!--面板的头部-->
        <div class="panel-header">
            <h2>zxyi教育系统</h2>
        </div>
        <!--面板的中间内容-->
        <div class="panel-content">
            <!--账号输入框-->
            <div class="user-pwd">
                <img src="images/icon_people.png">
                <input placeholder="请输入用户名/手机号" name="user">
            </div>
            <!--密码输入框-->
            <div class="user-pwd">
                <img src="images/icon_password.png">
                <input placeholder="请输入密码" type="password" name="pwd">
            </div>
            <!--默认的设置-->
            <div class="setting">
                <a href="#"><input type="checkbox"> 下次自动登录</a>
                <a href="#" class="pull-right">忘记密码?</a>
            </div>
            <!--登录按钮-->
            <button class="login-btn">登&nbsp;录</button>
            <!--立即注册-->
            <div class="reg">
                还没账号?&nbsp;&nbsp;<a href="#">立即注册</a>
            </div>
        </div>
        <!--面板的尾部-->
        <div class="panel-footer">
            <span>社交账号登录: </span>
            <img src="images/sina.png">
            <img src="images/weixin.png">
            <img src="images/qq.png">
        </div>
    </div>
    <script>
        //能点击的位置
        var panelHeader = document.querySelector('.panel-header');
        //整个面板
        var panel = document.querySelector('#panel')
        //按住面板头部移动
        panelHeader.addEventListener('mousedown', function (e) {
            //offsetleft盒子距离body距离
            var x = e.pageX - panel.offsetLeft;
            var y = e.pageY - panel.offsetTop;
            //移动面板的位置
            panelHeader.addEventListener('mousemove', move);
            function move(e) {
                // page点击距离body距离
                panel.style.left = e.pageX - x + 'px';
                panel.style.top = e.pageY - y + 'px';

            }
            panelHeader.addEventListener('mouseup', function () {
                //删除鼠标抬起的事件
                panelHeader.removeEventListener('mousemove', move)
            })

        })


    </script>
</body>

</html>